<template>
	<view class="register">
		<!-- <view class="input-box input-box-phone">
			<view>
				<image src="/static/images/phone-icon.png" mode=""></image>
				<view>|</view>
			</view>
			<input type="number" pattern="\d*" maxlength="11" class="phone-ipt" value="" v-model="phone" placeholder="请输入手机号码" placeholder-style="color:#C0C0C0;font-size:28rpx;" />	
		</view> -->
		
		<!-- <view class="input-box">
			<view>
				<image src="/static/images/code.png" mode=""></image>
				<view>|</view>
			</view>
			<input type="number" class="phone-ipt phone-ipt-code" value="" v-model="verificationCode" placeholder="请输入验证码" placeholder-style="color:#C0C0C0;font-size:28rpx;" />	
			<view class="getMsgCode" @click="getVerificationCode()" >{{ !showCount?'获取验证码':countTime+'秒后重试'}}</view>
		</view> -->
		<block v-if="type=='modify'">
			<view class="input-box">
				<view>
					<image src="/static/images/password.png" mode=""></image>
					<view>|</view>
				</view>
				<input type="password" class="phone-ipt" value="" v-model="oldpassword" placeholder="请输入旧交易密码" placeholder-style="color:#C0C0C0;font-size:28rpx;" />	
			</view>
			<view class="input-box">
				<view>
					<image src="/static/images/password.png" mode=""></image>
					<view>|</view>
				</view>
				<input type="password" class="phone-ipt" value="" v-model="password" placeholder="请输入新交易密码" placeholder-style="color:#C0C0C0;font-size:28rpx;" />	
			</view>
			
		</block>
		
		<block v-if="type=='set'">
			<view class="input-box">
				<view>
					<image src="/static/images/password.png" mode=""></image>
					<view>|</view>
				</view>
				<input type="password" class="phone-ipt" value="" v-model="password" placeholder="请输入交易密码" placeholder-style="color:#C0C0C0;font-size:28rpx;" />	
			</view>
		</block>
		
		<view class="input-box">
			<view>
				<image src="/static/images/code.png" mode=""></image>
				<view>|</view>
			</view>
			<input type="text" class="phone-ipt phone-ipt-code" v-model="imgCode" placeholder="请输入图形验证码"  placeholder-style="color:#C0C0C0;font-size:28rpx;" />	
			<view class="getMsgCode" @click="getCapchaBeforeSms()" v-if="!captcha_image" >获取图形验证码</view>
			<view class="imgCode" v-else @click="getCapchaBeforeSms()">
				<image :src="captcha_image" mode=""></image>
			</view>
		</view>
		
		<view class="forget-pay-password" @click="forgetPayPassword()" v-if="type=='modify'">忘记旧交易密码，请联系客服</view>
		
		<view class="registerNow" @click="setPayCode()" >确认</view>
	</view>
</template>

<script>
	import store from "store";
	import { registerByApp,sendingSmsCode,resetPassword,getCapchaBeforeSms,setPayCode } from 'api/authApi.js'
	
	export default{
		store,
		data(){
			return {
				phone:'',
				verificationCode:'',
				password:'',
				oldpassword:'',
				inviteCode:'',
				showCount:false,
				countTime:null,
				type:'set',
				captcha_image:null,
				captcha_key:null,
				imgCode:null
			}
		},
		onLoad(options) {
			if(options.type){
				this.type = options.type;
				if(this.type == 'modify'){
					uni.setNavigationBarTitle({
						title:'修改交易密码'
					})
				}else{
					uni.setNavigationBarTitle({
						title:'设置交易密码'
					})
				}
			}
		},
		methods:{
			setPayCode(){
				let parms = {}
				if(this.type == 'set'){
					parms = {
						new_pay_code:this.password,
						captcha_key:this.captcha_key,
						captcha_code:this.imgCode
					}
				}
				if(this.type == 'modify'){
					parms = {
						old_pay_code:this.oldpassword,
						new_pay_code:this.password,
						captcha_key:this.captcha_key,
						captcha_code:this.imgCode
					}
				}
				
				setPayCode(parms).then(res=>{
					if(!res.message){
						uni.showToast({
							title:'设置成功',
							duration:1500
						})
						setTimeout(()=>{
							uni.navigateBack({})
						},1500)
					}else{
						this.captcha_image = null;
						this.captcha_key = null;
						this.getCapchaBeforeSms()
						uni.showModal({
						  title: '提示', content: Object.values(res.errors)[0][0], showCancel: false
						})
					}
				})
			},
			getCapchaBeforeSms(){
				let parms = {
					// phone:this.phone,
					type:'set_pay_code'
				}
				getCapchaBeforeSms(parms).then(res=>{
					if(!res.message){
						this.captcha_image = res.captcha_image_content
						this.captcha_key = res.captcha_key
					}else{
						uni.showModal({
						  title: '提示', content: Object.values(res.errors)[0][0], showCancel: false
						})
					}
					
				})
			},
			resetPassword(){
				let params = {
					phone:this.phone,
					sms_key:this.sms_key,
					sms_code:this.verificationCode,
					password:this.password
				}
				resetPassword(params).then(res=>{
					uni.showToast({
						title:'重置成功请登录',
						duration:1500
					})
					setTimeout(()=>{
						uni.navigateBack({})
					},1500)
				})
			},
			forgetPayPassword(){
				uni.showModal({
					title:'提示',
					content:'忘记旧交易密码请联系客服！',
					confirmText:'联系客服',
					cancelText:'知道了',
					confirmColor:'#FF6011',
					cancelColor:'#666666',
					success: function (res) {
						if (res.confirm) {
							location.href = 'weixin://dl/business/?t=svbvUImDUma'
						} else if (res.cancel) {
							
						}
					}
				})
			},
			getVerificationCode(){
				if (this.showCount) { return }
				let phone = this.phone;
				let isPhone = this.isPhoneAvailable(phone);
				if(phone==''){
					uni.showToast({
						icon:'none',
						title:'请输入手机号'
					})
				}else if(!isPhone){
					uni.showToast({
						icon:'none',
						title:'请输入正确的手机号'
					})
				}else if(!this.imgCode){
					uni.showToast({
						icon:'none',
						title:'请输入图形验证码'
					})
				}else{
					let time = 60;
					let params = {
						phone:this.phone,
						type:'set_pay_code',
						captcha_key:this.captcha_key,
						captcha_code:this.imgCode
					}
					sendingSmsCode(params).then(res=>{
						if(!res.message){
							this.showCount = true;
							this.countTime = time;
							this.setCountTime(time);
							this.sms_key = res.key;
						}else{
							uni.showModal({
							  title: '提示', content: Object.values(res.errors)[0][0], showCancel: false
							})
						}
					})
				}
			},
			setCountTime(time) {
				let count = setInterval(() => {
					time = time - 1
					this.countTime = time
					if (this.countTime == 0) {
						this.showCount = false
						this.countTime = null
						clearInterval(count)
					}
				}, 1000)
			},
			isPhoneAvailable(str) {
				let myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				if (!myreg.test(str)) {
					return false;
				} else {
					return true;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.register{
		padding-top: 120rpx;
	}
	.input-box{
		width: 614rpx;
		height: 84rpx;
		margin: 0 auto 40rpx;
		background: #F5F5F5;
		border-radius: 42rpx;
		display: flex;
		align-items: center;
		>view{
			display: flex;
			align-items: center;
			height: 100%;
			color: #C0C0C0;
			>image{
				display: block;
				width: 56rpx;
				height: 56rpx;
				margin-left: 24rpx;
			}
		}
		.getMsgCode{
			font-size: 28rpx;
			font-weight: 400;
			color: #F02A28;
		}
		.imgCode{
			width:230rpx;
			height:70%;
			margin-right: 30rpx;
			
			>image{
				display: block;
				width: 100%;
				height: 100%;
				// border-radius:0 42rpx 42rpx 0;
			}
		}
	}
	.forget-pay-password{
		width: 614rpx;
		height: 64rpx;
		margin: 0 auto 20rpx;
		text-align: right;
		padding-right: 40rpx;
		font-size: 26rpx;
		color:#FF9500;
	}
	.phone-ipt{
		margin-left: 24rpx;
		font-size: 28rpx;
		color: #555555;
		width:420rpx;
	}
	.phone-ipt-code{
		width:280rpx;
	}
	.registerNow{
		width: 614rpx;
		height: 84rpx;
		background: linear-gradient(90deg, #FFE066 0%, #FEBD01 100%);
		border-radius: 42rpx;
		display:flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
		letter-spacing: 2rpx;
		margin: 100rpx auto 0;
	}
	
</style>
